<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图表生成工具 - 99论文助手</title>
    <meta name="description" content="专业的论文图表生成工具，支持实体属性图、用例图、功能架构图等多种图表类型">
    
    <!-- 外部CSS库 -->
    <script src="../css/tailwindcss.js"></script>
    <link href="../css/font-awesome.min.css" rel="stylesheet">
    
    <!-- 自定义CSS -->
    <link rel="stylesheet" href="../css/style.css">
    
    <!-- Tailwind 配置 -->
    <script src="../js/tailwind-config.js"></script>
    
    <!-- 共用导航栏 -->
    <script src="../js/navbar.js"></script>
  <script src="../js/footer.js"></script>
    
    <style>
        /* 图表卡片样式 */
        .chart-card {
            background: white;
            border-radius: 1.5rem;
            padding: 2rem;
            transition: all 0.3s ease;
            border: 2px solid #E5E7EB;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        
        .chart-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(22, 93, 255, 0.05), transparent);
            transition: left 0.5s;
        }
        
        .chart-card:hover::before {
            left: 100%;
        }
        
        .chart-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
            border-color: var(--primary);
        }
        
        .chart-icon {
            width: 80px;
            height: 80px;
            border-radius: 1rem;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2.5rem;
            margin: 0 auto 1.5rem;
            transition: all 0.3s ease;
        }
        
        .chart-card:hover .chart-icon {
            transform: scale(1.1) rotate(5deg);
        }
        
        .chart-features {
            list-style: none;
            padding: 0;
            margin: 1rem 0;
        }
        
        .chart-features li {
            padding: 0.5rem 0;
            color: #6B7280;
            display: flex;
            align-items: center;
        }
        
        .chart-features li i {
            color: var(--primary);
            margin-right: 0.5rem;
        }
        
        .btn-chart {
            width: 100%;
            padding: 0.875rem 1.5rem;
            border-radius: 0.75rem;
            font-weight: 600;
            transition: all 0.3s ease;
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
        }
        
        .btn-chart:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
        }
        
        /* 响应式 */
        @media (max-width: 768px) {
            .chart-grid {
                grid-template-columns: 1fr !important;
            }
        }
        
        @media (max-width: 1024px) and (min-width: 769px) {
            .chart-grid {
                grid-template-columns: repeat(2, 1fr) !important;
            }
        }
    </style>
</head>
<body class="bg-gradient-to-br from-light to-gray-100 font-inter min-h-screen flex flex-col">
    
    <!-- 导航栏将通过 navbar.js 动态加载 -->

    <!-- 主要内容 -->
    <main class="flex-grow container mx-auto px-4 py-8">
        
        <!-- 页面标题区域 -->
        <section class="max-w-6xl mx-auto mb-12">
            <div class="text-center mb-8">
                
                <div style="animation: fadeInUp 0.6s ease-out both;">
                    <h2 class="text-[clamp(2rem,5vw,3.5rem)] font-bold text-dark mb-3">
                        专业<span class="text-primary">图表生成</span>工具
                    </h2>
                    <p class="text-gray-600 text-lg max-w-2xl mx-auto">
                        快速创建计算机相关专业的实体关系图、用例图和功能架构图，支持自定义样式、实时预览、多格式导出
                    </p>
                </div>
            </div>
        </section>

        <!-- 图表工具卡片 -->
        <section class="max-w-6xl mx-auto" style="animation: fadeInUp 0.6s ease-out 0.2s both;">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 chart-grid">
                
                <!-- 实体属性图 -->
                <div class="chart-card" onclick="openChart('entity')">
                    <div class="chart-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
                        <i class="fa fa-project-diagram text-white"></i>
                    </div>
                    <h3 class="text-2xl font-bold text-dark mb-3 text-center">实体属性图</h3>
                    <p class="text-gray-600 text-center mb-4">
                        创建专业的ER图，清晰展示数据库设计中的实体、属性和关系
                    </p>
                    <ul class="chart-features">
                        <li><i class="fa fa-check-circle"></i> 自动布局算法</li>
                        <li><i class="fa fa-check-circle"></i> 实体属性关系</li>
                        <li><i class="fa fa-check-circle"></i> 多种导出格式</li>
                        <li><i class="fa fa-check-circle"></i> 个性化样式</li>
                    </ul>
                    <button class="btn-chart text-white" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
                        <i class="fa fa-arrow-right"></i>
                        <span>开始创建</span>
                    </button>
                </div>

                <!-- 用例图 -->
                <div class="chart-card" onclick="openChart('usecase')">
                    <div class="chart-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
                        <i class="fa fa-users text-white"></i>
                    </div>
                    <h3 class="text-2xl font-bold text-dark mb-3 text-center">用例图生成器</h3>
                    <p class="text-gray-600 text-center mb-4">
                        快速绘制UML用例图，展示系统功能和用户交互关系
                    </p>
                    <ul class="chart-features">
                        <li><i class="fa fa-check-circle"></i> 用户角色管理</li>
                        <li><i class="fa fa-check-circle"></i> 用例关系定义</li>
                        <li><i class="fa fa-check-circle"></i> 智能连线布局</li>
                        <li><i class="fa fa-check-circle"></i> 实时预览编辑</li>
                    </ul>
                    <button class="btn-chart text-white" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
                        <i class="fa fa-arrow-right"></i>
                        <span>开始创建</span>
                    </button>
                </div>

                <!-- 功能架构图 -->
                <div class="chart-card" onclick="openChart('architecture')">
                    <div class="chart-icon" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
                        <i class="fa fa-sitemap text-white"></i>
                    </div>
                    <h3 class="text-2xl font-bold text-dark mb-3 text-center">功能架构图</h3>
                    <p class="text-gray-600 text-center mb-4">
                        设计系统功能架构，清晰展示模块层次和组件关系
                    </p>
                    <ul class="chart-features">
                        <li><i class="fa fa-check-circle"></i> 层次结构展示</li>
                        <li><i class="fa fa-check-circle"></i> 模块依赖关系</li>
                        <li><i class="fa fa-check-circle"></i> 拖拽式编辑</li>
                        <li><i class="fa fa-check-circle"></i> 多种图表样式</li>
                    </ul>
                    <button class="btn-chart text-white" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
                        <i class="fa fa-arrow-right"></i>
                        <span>开始创建</span>
                    </button>
                </div>

            </div>
        </section>

        <!-- 功能特点 -->
        <section class="max-w-6xl mx-auto mt-16" style="animation: fadeInUp 0.6s ease-out 0.4s both;">
            <h3 class="text-3xl font-bold text-dark text-center mb-8">为什么选择我们</h3>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                
                <div class="bg-white rounded-2xl p-6 shadow-soft hover:shadow-hover transition-all">
                    <div class="w-16 h-16 rounded-full bg-blue-100 flex items-center justify-center mb-4">
                        <i class="fa fa-bolt text-blue-600 text-2xl"></i>
                    </div>
                    <h4 class="text-xl font-bold text-dark mb-2">快速高效</h4>
                    <p class="text-gray-600">
                        简洁直观的操作界面，无需复杂学习，即可快速创建专业图表
                    </p>
                </div>

                <div class="bg-white rounded-2xl p-6 shadow-soft hover:shadow-hover transition-all">
                    <div class="w-16 h-16 rounded-full bg-green-100 flex items-center justify-center mb-4">
                        <i class="fa fa-paint-brush text-green-600 text-2xl"></i>
                    </div>
                    <h4 class="text-xl font-bold text-dark mb-2">自定义样式</h4>
                    <p class="text-gray-600">
                        支持颜色、字体、线条等多种样式自定义，打造独特的图表风格
                    </p>
                </div>

                <div class="bg-white rounded-2xl p-6 shadow-soft hover:shadow-hover transition-all">
                    <div class="w-16 h-16 rounded-full bg-purple-100 flex items-center justify-center mb-4">
                        <i class="fa fa-download text-purple-600 text-2xl"></i>
                    </div>
                    <h4 class="text-xl font-bold text-dark mb-2">多格式导出</h4>
                    <p class="text-gray-600">
                        支持PNG、SVG、PDF等多种格式导出，满足不同场景需求
                    </p>
                </div>

            </div>
        </section>

    </main>

    <!-- 页脚 -->
    <div id="footer-container"></div>

    <script>
        // 打开图表生成器
        function openChart(type) {
            const urls = {
                'entity': 'd-index.html',
                'usecase': 'u-index.html',
                'architecture': 'c-index.html'
            };
            
            if (urls[type]) {
                window.location.href = urls[type];
            }
        }

        // 页面加载完成后的初始化
        document.addEventListener('DOMContentLoaded', function() {
            console.log('✅ 图表生成工具页面加载完成');
            
            // 添加卡片悬停音效反馈（可选）
            const cards = document.querySelectorAll('.chart-card');
            cards.forEach(card => {
                card.addEventListener('mouseenter', function() {
                    this.style.transition = 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)';
                });
            });
        });
    </script>
</body>
</html>
